<template>
  <div class="personal">
    <div class="bg" :style="{ backgroundImage: `url(${userInfo.userBg})` }">
      <van-uploader :after-read="updateUserBg" />
    </div>
    <div class="personalInfo">
      <div class="head">
        <div class="headImg">
          <img class="imgCover" :src="userInfo.userImg" />
          <div class="upLoad">
            <van-uploader :max-size="500 * 1024" :after-read="updateAvatar" />
          </div>
        </div>
        <div class="description">
          <div class="name">{{ userInfo.nickName }}</div>
          <div class="desc">
            {{ userInfo.desc ? userInfo.desc : "暂无描述。" }}
          </div>
        </div>
      </div>
      <van-cell-group>
        <van-cell title="个人资料" to="./my" is-link />
        <van-cell title="个人收藏" to="./colle" is-link />
        <van-cell title="订单管理" to="./order" is-link />
        <van-cell title="地址管理" to="./address" is-link />
        <van-cell title="安全中心" to="./safe" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import "../assets/less/personal.less";
export default {
  name: "Personal",
  data() {
    return {
      userInfo: [],
    };
  },
  methods: {
    findMy() {
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });
      this.$axios({
        method: "GET",
        url: "/findMy",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((res) => {
          // console.log("res findMy ==> ", res);
          this.$toast.clear();

          if (res.data.code === "A001") {
            this.userInfo = res.data.result[0];
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    updateUserBg(file) {
      let types = ["png", "gif", "jpg", "jpeg", "webp"];
      let type = file.file.type.split("/")[1];
      // console.log("type ==> ", type);
      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 1000,
        });
      }
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");

      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "POST",
        url: "/updateUserBg",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          // console.log("res updateUserBg ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "I001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userBg = res.data.userBg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    updateAvatar(file) {
      let types = ["png", "gif", "jpg", "jpeg", "webp"];
      let type = file.file.type.split("/")[1];
      // console.log("type ==> ", type);
      if (types.indexOf(type) === -1) {
        return this.$toast({
          message: `文件类型只支持${types.join(",")}`,
          forbidClick: true,
          duration: 1000,
        });
      }
      let base64 = file.content.replace(/data:image\/[A-Za-z]+;base64,/, "");
      let tokenString = this.$cookies.get("tokenString");
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }
      this.$toast.loading({
        message: "加载中",
        forbidClick: true,
        duration: 0,
      });

      this.$axios({
        method: "POST",
        url: "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString,
          imgType: type,
          serverBase64Img: base64,
        },
      })
        .then((res) => {
          // console.log("res uploadAvatar ==> ", res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === "H001") {
            if (res.data.result[0] === 1) {
              this.userInfo.userImg = res.data.userImg;
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 1000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
  created() {
    this.findMy();
  },
};
</script>
